<a href="" uib-dropdown-toggle class="dropdown-toggle">
	<i class="ace-icon fa fa-bell icon-animated-bell"></i>
	<span class="badge badge-important" ng-bind="::getCommonData('navbar').notifications.count"></span>
</a>
<ul class="dropdown-menu-right dropdown-navbar navbar-pink dropdown-menu dropdown-caret dropdown-close">
	<li class="dropdown-header">
		<i class="ace-icon fa fa-exclamation-triangle"></i> {{::getCommonData('navbar').notifications.count}} Notifications
	</li>

	<li class="dropdown-content" ace-scroll options="{'size': 200, 'mouseWheelLock': true, 'reset': false}">
		<ul class="dropdown-menu dropdown-navbar navbar-pink">
			<li ng-repeat="notification in ::getCommonData('navbar').notifications.latest">
				<a href="">
					<div ng-if="notification.badge" class="clearfix">
						<span class="pull-left"><i class="btn btn-xs no-hover {{notification['icon-class']}} {{notification.icon}}"></i> {{notification.title}}</span>
						<span class="pull-right badge {{notification['badge-class']}}">{{notification.badge}}</span>
					</div>
					<div ng-if="!notification.badge">
						<i class="btn btn-xs {{notification['icon-class']}} {{notification.icon}}"></i> {{notification.title}}
					</div>
				</a>
			</li>
		</ul>
	</li>

	<li class="dropdown-footer">
		<a href="">
			See all notifications
			<i class="ace-icon fa fa-arrow-right"></i>
		</a>
	</li>
</ul>
